
//全局变量
var table1;
var table2;
var table3;
var table4;
var apps;

var keys=[];
var values=[];
var myDate=new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var day=myDate.getDate();
var time=year+"年"+month+"月"+day+"日 ";
var tt=[];

// 定时变量
var setTime;
var time = 60 * 1000; // 1分钟

//定时获取图表方法
function timer() {
	// 获取当前时间的分钟
	var curDate=new Date();
	var minute = curDate.getMinutes();
	var second = curDate.getSeconds();
	var fiveVal = minute % 5;//能否被5整除
	// 5分钟0秒时才执行
	if(fiveVal == 0 && second == 0) {
//		console.log("定时调用获取图表，当前时间: " + curDate.getHours() + ":" + minute + second);
		getChart();//调用获取图表方法
	}
}


//页面加载图表
$(function(){
//	console.log("初始化图表");
	getChart();//调用获取图表方法
	
	// 定时调用图表(方式2)
	setTime = setInterval(function() {
//		console.log("每秒定时");
		timer();//调用定时获取图表
	}, 1000);//每1秒钟秒判断一次
	
	// 定时调用图表(方式1)
	/*setTime = setInterval(function() {
		console.log("定时调用获取图表");
		getChart();//调用获取图表方法
	},time);*/
});

//调用的获取图表方法
function getChart() {

	/**1.实时消息流量表*/
	var url1 = proName + "/queueChart/getOneMsgFlow";
	var data1 = {
		"tId": tId,
		"topicQueueNo": topicQueueNo
	}
	/**2.消息发送延迟*/
	var url2 = proName + "/queueChart/getOneMsgSendDelay";
	var data2 = {
		"tId": tId,
		"topicQueueNo": topicQueueNo
	}
	/**3.内存实时占用情况*/
	var url3 = proName + "/queueChart/getOneMemoryStatus";
	var data3 = {
		"tId": tId,
		"topicQueueNo": topicQueueNo
	}
	/**4.磁盘剩余空间*/
	var url4 = proName + "/queueChart/getOneDiskIO";
	var data4 = {
		"tId": tId,
		"topicQueueNo": topicQueueNo
	}
	/**5.队列拓扑图*/
	var url5 = proName + "/queueChart/getAppInfo";
	var data5 = {
		"tId": tId,
		"topicQueueNo": topicQueueNo
	}
	
	//初始化时执行一次
	/**1.实时消息流量表*/
	$.post(url1, data1, function(map) {
		var kpiTimes = map.kpiTimes;//消息流量时间集合
		var kpiValues = map.kpiValues;//消息流量集合
		getOneMsgFlow(kpiTimes,kpiValues);
	});
	/**2.消息发送延迟*/
	$.post(url2, data2, function(map) {
		var kpiTimes = map.kpiTimes;//发送延迟时间集合
		var kpiValues = map.kpiValues;//发送延迟集合
		getOneMsgSendDelay(kpiTimes,kpiValues);
	});
	/**3.内存实时占用情况*/
	$.post(url3, data3, function(map) {
		var kpiTimes = map.kpiTimes;//内存时间集合
		var kpiValues = map.kpiValues;//内存集合
		getOneMemoryStatus(kpiTimes,kpiValues);
	});
	/**4.磁盘剩余空间*/
	$.post(url4, data4, function(map) {
		var kpiTimes = map.kpiTimes;//磁盘时间集合
		var readValues = map.readValues;//磁盘读取集合
		var writeValues = map.writeValues;//磁盘写入集合
		getOneDiskIO(kpiTimes,readValues,writeValues);
	});
	/**5.队列拓扑图*/
	$.post(url5,data5,function(map){
		getAppInfo(map);
	});
}

/*******第一个图表：具体队列的实时消息流量表*******/
function getOneMsgFlow(kpiTimes,kpiValues) {
	// 如果使用过，会让table1 的使用场景消失掉。
	if(table1!=null && table1!=""&& table1!=undefined){
		table1.dispose();
	}
	table1 = echarts.init(document.getElementById('table1'));
	var option1 = {
			//表格背景颜色
			backgroundColor:'#5A7BEF',
			//表格标题
			title : {text : time+' 实时消息流量表',/*subtext : '单位:  条', */textStyle:{fontSize:14,color:'#fff',},x:5,y:10,},
			//提示框，鼠标悬浮交互时的信息提示
		    tooltip : {
		        trigger: 'axis',
		    	formatter:function(param){
		        	return "&nbsp;&nbsp;&nbsp;&nbsp;" + param[0].name + "<br/>"
	        		+  param[0].marker + " " + param[0].seriesName + "：" + param[0].value + " 条";
		    	}
		    },
		    dataZoom : { show : false, start : 0,end : 100 },
		    //x轴设计
		    xAxis : [
		        {
		            type : 'value', scale: true,name : '时间',type : 'category',
		    		boundaryGap : false,
					axisLabel:{show:true,textStyle:{color:'#fff',},},
					axisLine:{lineStyle:{color:'#fff',},},
					axisTink:{show:false,},
					splitLine:{show:false,},
		            data : kpiTimes,
		        },
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            scale: true,
		            name : '单位：条',
					axisLabel:{
						formatter:'{value}',
						textStyle:{color:'#fff',},
					},
					axisLine:{lineStyle:{color:'#fff',},},
					axisTink:{show:false,},
					splitLine:{show:false,},
		        },
		    ],
		    series : [
		        {
		            name:'消息流量',
		            type:'line',
					smooth : true,//曲线连接
					lineStyle:{normal:{color:"#F87C3A",width:2,},},//曲线样式(橘色)
		            itemStyle:{	//图形样式
		            	emphasis:{
		            		barBorderRadius:30,
		            	},
		            	normal:{
		            		color:'#F87C3A',//提示中点的颜色
		            	},
		            },
		            areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0,color: '#A998C5' }, {offset: 1, color: 'rgba(0,0,0,0)' }]), }},
			        data:kpiValues,
		         }
		    ]
	}
	table1.setOption(option1);
}

/*******第二个图表：具体队列的实时消息发送延迟*******/
function getOneMsgSendDelay(kpiTimes,kpiValues) {
	if(table2!=null && table2!=""&& table2!=undefined){
		table2.dispose();
	}
	table2 = echarts.init(document.getElementById('table2'));
	var option2 = {
		//表格背景颜色
		backgroundColor:'#C13AF1',
		//标题样式
	    title : {
	        text: time+'实时消息发送延迟',
	        /*subtext: '延迟时间 m',*/
			textStyle:{
				fontSize:14,
				color:'#fff',
			},
			subtextStyle:{
				fontSize:12,
				color:'#fff',
			},
			x:5,
			y:10,
	    },
		//提示框，鼠标悬浮交互时的信息提示
	    tooltip : {
	        trigger: 'axis',
	    	formatter:function(param){
	        	return "&nbsp;&nbsp;&nbsp;&nbsp;" + param[0].name + "<br/>"
        		+  param[0].marker + " " + param[0].seriesName + "：" + param[0].value + " 毫秒";
	    	}
	    },
/*		//图例
	    legend: {
	        data:['延迟','总数']
	    },*/
		 //是否启用拖拽重计算特性
	    calculable : true,
	    //X轴设计
	    xAxis : [
	        {
	            type : 'category',
	            name:'时间',
				/* boundaryGap : false, *///是否以原点为中心
				axisLabel:{
					show:true,
					textStyle:{
						color:'#fff',
					},
				},
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{
					show:false,
				},
				splitLine:{
					show:false,
				},
	            data : kpiTimes,
	        }
	    ],
	    //Y轴设计
	    yAxis : [
	        {
	            type : 'value',
	            name:'单位: 毫秒',
				axisLabel:{
					formatter:'{value} ms',
					textStyle:{
						color:'#fff',
					},
				},
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{show:false,},
				splitLine:{show:false,},//x轴竖线
	        }
	    ],
	    series : [
	        {
	            name:'延迟毫秒',
	            type:'bar',
		        data:kpiValues,
	            barWidth:30,
	            itemStyle:{	//图形样式
	            	emphasis:{
	            		barBorderRadius:30,
	            	},
	            	normal:{
	            		barBorderRadius:[20,20,0,0],
	            		color:'#fff',
	            	},
	            },
	            markPoint : {
	            	itemStyle:{
	            		show:true,
	            		color:'#333',
	            	},
	                data : [
	                    {type : 'max', name: '最大值'},
	                    {type : 'min', name: '最小值'}
	                ]
	            },
	            markLine : {
	                data : [
	                    {type : 'average', name: '平均值'}
	                ]
	            }
	        },
	    ]
	};
	table2.setOption(option2);
}

/*******第三个图表：具体队列的内存实时占用情况*******/
function getOneMemoryStatus(kpiTimes,kpiValues) {
	if(table3!=null && table3!=""&& table3!=undefined){
		table3.dispose();
	}
	table3 = echarts.init(document.getElementById('table3'));
	var option3 = {
		//表格背景颜色
		backgroundColor:'#10D09F',
		title : {
			text : time + ' 队列内存实时占用',
			/*subtext : '单位:  条', */
			textStyle:{
				fontSize:14,
				color:'#fff',
			},
			x:5,
			y:10,
		},
	    tooltip : {
	        trigger: 'axis',
	        formatter:function(param){
//	        	console.log("param：", param);
	        	// 时间(横坐标) + 图标 + 提示名 + value值 + 单位
	        	return "&nbsp;&nbsp;&nbsp;&nbsp;" + param[0].name + "<br/>"
	        		+  param[0].marker + " " + param[0].seriesName + "：" + param[0].value +  " KB";
	        }
//	        formatter:"{a}：{c} KB"
//	        formatter:"{a}</br/>{b}：{c}KB"
	    },
	    //辅助工具箱
	    toolbox: {
	        show : false,
	        /*feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }*/
	    },
	    calculable : true,
	    //x轴设计
	    xAxis : [
	        {
	            type : 'value', scale: true,name : '时间',type : 'category',
	    		boundaryGap : false,
				axisLabel:{show:true,textStyle:{color:'#000',},},
				axisLine:{show:false},//x轴线
				axisTick:{show:false,},//x轴上点
				splitLine:{show:false,},//x轴竖线
	            data : kpiTimes,
//	            data : ['周一','周二','周三','周四','周五','周六','周日'],
	            nameTextStyle:{color:'#000',},
	        },
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            scale: true,
	            name : '单位：KB',
	           /* boundaryGap: [0.2, 0.2],*/
				axisLabel:{formatter:'{value}',textStyle:{color:'#000',},},
				axisLine:{show:false},//y轴线
				axisTick:{show:false,},//y轴上点
				splitLine:{show:false,},//x轴竖线
				min:0,
	        },
	    ],
	    series : [
	        {
	            name:'内存占用',
	            type:'line',
				smooth : true,//曲线连接
				lineStyle:{normal:{color:"#C13AF1",width:2,},},//曲线样式(橘色)
	            itemStyle:{	//图形样式
	            	emphasis:{
	            		barBorderRadius:30,
	            	},
	            	normal:{
	            		color:'#C13AF1',//提示中点的颜色
	            	},
	            },
	            areaStyle: {
	            	normal: {//数据渐变色
	            		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	            			{ offset: 0,color: '#A998C5' }, 
	            			{offset: 1, color: 'rgba(0,0,0,0)' }
	            		]), 
	            	}
	            },
	            data : kpiValues,
//		        data:[1, 2, 3, 4, 5, 6, 7],
	        },
	    ],
	};
	table3.setOption(option3);
}

/*******第四个图表：具体队列的磁盘IO*******/
function getOneDiskIO(kpiTimes,readValues,writeValues) {
	if(table4!=null && table4!=""&& table4!=undefined){
		table4.dispose();
	}
	table4 = echarts.init(document.getElementById('table4'));
	var option4 = {
		//表格背景颜色
		backgroundColor:'#5A7BEF',
		title : {
			text : time + ' 磁盘IO',
			/*subtext : '单位:  条', */
			textStyle:{
				fontSize:14,
				color:'#fff',
			},
			x:5,
			y:10,
		},
		tooltip : {
	        trigger: 'axis',
	        formatter:function(param){
	        	// 时间(横坐标)
	        	var title =  "&nbsp;&nbsp;&nbsp;&nbsp;" + param[0].name + "<br/>";
	        	//  图标 + 提示名 + value值 + 单位
	        	for(var i=0; i <param.length; i++) {
		        	title +=  param[i].marker + " " + param[i].seriesName + "：" + param[i].value +  " KB<br/>";
	        	}
	        	return title;
	        }
	    },
	    //辅助工具箱
	    toolbox: {
	        show : false,
	    },
	    calculable : true,
	    //x轴设计
	    xAxis : [
	        {
	            type : 'value', scale: true,name : '时间',type : 'category',
	    		boundaryGap : false,
				axisLabel:{show:true,textStyle:{color:'#000',},},
				axisLine:{show:false},//x轴线
				axisTick:{show:false,},//x轴上点
				splitLine:{show:false,},//x轴竖线
				data: kpiTimes,
	            nameTextStyle:{color:'#000',},
	        },
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            scale: true,
	            name : '单位：KB',
	           /* boundaryGap: [0.2, 0.2],*/
				axisLabel:{formatter:'{value}',textStyle:{color:'#000',},},
				axisLine:{show:false},//y轴线
				axisTick:{show:false,},//y轴上点
				splitLine:{show:false,},
				min:0,
	        },
	    ],
	    series : [
	        {
	            name:'磁盘读取',
	            type:'line',
				smooth : true,//曲线连接
				lineStyle:{normal:{color:"#0C39F3",width:2,},},
	            areaStyle: {
	            	normal: {//数据视图渐变色
	            		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	            			{ offset: 0,color: '#0A75F9' }, 
	            			{offset: 1, color: 'rgba(0,0,0,0)' }
	            		]), 
	            	}
	            },
	            itemStyle:{	//图形样式
	            	emphasis:{
	            		barBorderRadius:30,
	            	},
	            	normal:{
//	            		barBorderRadius:[20,20,0,0],
	            		color:'#0C39F3',//提示中点的颜色
	            	},
	            },
	            data: readValues,
//		        data:[16, 20, 24, 27, 28, 30, 33],
	        },
	        {
	            name:'磁盘写入',
	            type:'line',
				smooth : true,//曲线连接
				lineStyle:{normal:{color:"#F9140A",width:2,},},//曲线样式
	            areaStyle: {
	            	normal: {//数据视图渐变色
	            		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	            			{ offset: 0,color: '#F33D0C' }, //曲线填充色
	            			{offset: 1, color: 'rgba(0,0,0,0)' }
	            		]), 
	            	}
	            },
	            itemStyle:{	//图形样式
	            	emphasis:{
	            		barBorderRadius:30,
	            	},
	            	normal:{
	            		barBorderRadius:[20,20,0,0],
	            		color:'#F9140A',
	            	},
	            },
	            data: writeValues,
//		        data:[5, 7, 12, 13, 14, 16, 20],
	        },
	    ],
	};
	table4.setOption(option4);
}

/*******第五个图表：应用拓扑图数据*******/
function getAppInfo(map) {
//	var topicQueueName = map.topicQueueName;
	var tAppList = map.tAppList;
//	console.log("目标应用信息: " + JSON.stringify(tAppList));
	var originName = map.origin.originName;
	var topicQueueNo = map.topicQueueNo;

	if(apps!=null && apps!=""&& apps!=undefined){
		apps.dispose();
	}
	apps = echarts.init(document.getElementById('apps'));
	var appData = {
	    "name": originName,
	    "children": tAppList
	}
	/*var appData = {
	    "name": "建筑统计",
	    "children": [
	        {
	            "name": "花草统计", 
	            "value": "红"
	        }
	    ]
	};*/

	var appOption = {
		backgroundColor:'#479BDC',
		title : {
			/*text : '主题队列名称：' + topicQueueName,
			subtext : '主题队列编码：' + topicQueueNo,*/
			subtextStyle : {
				fontSize: 13,
				color: '#fff'
			}
		},
		lineStyle: {
			normal:{
				color: '#fff',//#F1F1F1F
				width: 6,
			},
			type: 'dashed'
		},
	    tooltip: {
	        trigger: 'item',
	        triggerOn: 'mousemove',
//        	formatter:"{b}<br/>{c}"
	        formatter:function(params){
//	        	console.log("params",params);
	        	var pData = params.data;
//	        	console.log("params.data",pData);
	        	var data = params.data.data;
	        	//取data
	        	if(data) {
	        		var staticTime = params.data.staticTime;
//		        	console.log("params.data.data",data);
//		        	console.log("统计时间: ",staticTime);
		        	if(data.length > 0) {//param[0].marker + 
			        	var res = "应用名：" + data[0].name + "<br>" 
			        			+ "统计时间：" + staticTime + "<br><br>";
			        	for (var i = 0; i < data.length; i++) {
							res+= data[i].seriesName + '：' + data[i].value + '<br>';
						}
			        	return res;
		        	}
	        	}
	        	return '';
        	}
	    },
	    //名称属性
	    /*legend: {
	        top: '20%',
	        left: '2%',
	        orient: 'vertical',
	        data: [
		        {
		            name: '队列',
		            icon: 'rectangle'
		        }
		    ],
	        borderColor: '#c23531'
	    },*/
	    series:[
	        {
	            type: 'tree',
	            name: '队列',
	            data: [appData],
	            
	            //图在页面中的位置
	            top: '20%',
	            left: '20%',
	            bottom: '22%',
	            right: '35%',

	            symbolSize: 16,//节点大小

	            label: {
	                normal: {
	                    position: 'left',
	                    verticalAlign: 'middle',
	                    align: 'right',
	                    textStyle: {
	                    	color: '#fff',
	                        fontSize: 18,
	                        fontWeight: 'bolder'
	                    }
	                }
	            },

	            leaves: {
	                label: {
	                    normal: {
	                        position: 'right',
	                        verticalAlign: 'middle',
	                        align: 'left'
	                    }
	                }
	            },

	            expandAndCollapse: true,

	            animationDuration: 550,
	            animationDurationUpdate: 750
	        }
	    ]
	}

	apps.setOption(appOption);
			
}